<!--
 * @Descripttion: 
 * @version: 
 * @Author: weni09
 * @Date: 2021-04-19 14:07:40
 * @LastEditors: weni09
 * @LastEditTime: 2021-06-17 10:11:53
 * @FilePath: \icoder-frontend\blog\src\views\ArticleDetail.vue
-->
<template>
<div class="all">
		<el-row class="content" type="flex" justify="center">
			<el-col :span="14" class="art-content">
					<svg class="icon icon-top" v-if="artDetail.is_top" aria-hidden="true">
  							<use xlink:href="#icon-top"></use>
					</svg>
				<div class="banner" v-if="artDetail.img_link" style="text-align: center;">
					<el-image :key="artDetail.img_link" :src="baseUrl + artDetail.img_link" fit="fill" lazy></el-image>
				</div>
				<div class="article-header" >
				<!-- <div class="d-title"> -->
					<h2 class="article-title"><strong>{{artDetail.title}}</strong></h2>
				<!-- </div> -->
				<div class="art-edited-btn" style="text-align:right">
					<span class="art-edited" >
					<router-link 
							class="abs-link edit-link" 
							:to="`/article/edit/${artDetail.id}`" v-if="getIsEditable">编辑  </router-link>
					更新于 {{artDetail.update_date}}
					</span>
				</div>
					
					<p class="article-abs">
						<span :title="$t('article.author')">
						<svg class="icon icon-author" aria-hidden="true">
  							<use xlink:href="#icon-author"></use>
						</svg></span>
						<span class="abs-info" >
							{{ artDetail.nickname }}</span>
						<span :title="$t('category.name')">
						<svg class="icon icon-leimupinleifenleileibie2" aria-hidden="true">
  							<use xlink:href="#icon-leimupinleifenleileibie2"></use>
						</svg></span>
						<span class="abs-info" >
							<router-link 
							class="abs-link category-link" 
							:to="`/articles/category/${artDetail.category__slug}`">{{ artDetail.category__name }}
							</router-link></span>
						<span :title="$t('tag.name')">
						<svg class="icon icon-tag" aria-hidden="true">
  							<use xlink:href="#icon-tag"></use>
						</svg></span>
						<span class="abs-info" >
							<template v-for="(item,index) in artDetail.tags" >
							<router-link class="abs-link tag-link"
							:key ="index"
							:to="`/articles/tag/${item.tags__slug}`">{{ item.tags__name }}</router-link>
							</template>
						</span>
						<span :title="$t('article.create_date')">
						<svg class="icon icon-clock" aria-hidden="true">
  							<use xlink:href="#icon-clock"></use>
						</svg></span>
						<span class="abs-info create-date" :title="$t('article.create_date')">{{ artDetail.create_date }}</span>
						<span :title="$t('article.views')">
						<svg class="icon icon-view" aria-hidden="true">
  							<use xlink:href="#icon-view"></use>
						</svg></span>
						<span class="abs-info views">{{$t('article.views')}}&emsp;{{ artDetail.views }}</span>
					</p>
				</div>
				<div
				class="article-body markdown-body"
				v-html="artDetail.body"
				v-if="artDetail.id"
				v-highlight
				></div>
				<div
				class="article-body"
				style="text-align:center"
				v-else
				><p style="color:red;font-size:1.2em;">{{ artDetail.body }}</p></div>
				<div class="statement" v-if="artDetail.id">
					<p class="item">{{$t('article.author')}}：{{artDetail.nickname}}</p>
					<p class="item">{{$t('article.originalLink')}}：
						<a :href="urlAddress" class="article-link">{{urlAddress}}</a>
					</p>
					<p class="item">{{$t('article.copyright')}}：本博客所有文章除特别声明外,转载请注明出处!</p>
				</div>
			</el-col>
		</el-row>
		<el-row class="comment" type="flex" justify="center" v-if="artDetail.id">
			<div class="placeholder "></div>
			<el-col :span="14" class="art-content ">
				<comment></comment>
			</el-col>
			<el-backtop class="backtop"  :bottom="100" :right="100" :visibility-height="100">
				<span class="iconfont icon-backtop"></span>
  			</el-backtop>
		</el-row>
</div>
</template>

<script>
	import {fetchArtDetail,updateViews} from 'api';
	import comment from 'components/Comment.vue';
	
	export default {
		name: 'ArticleDetail',
		data(){
			return {
				artDetail:Object,
				urlAddress:'',
				baseUrl: process.env.NODE_ENV === 'production'
											? window.location.protocol+ "//" + window.location.host + "/" 
											// ? ''
											:process.env.VUE_APP_BASE_URL,
				isEditable:false,
			}
		},
		components:{
			comment,
		},
		computed:{
			getIsEditable:function(){
				let auth = this.$store.getters.auth;
				let authorId = this.artDetail.author_id;
				return  (auth.user_id && authorId == auth.user_id) || ( auth.user && auth.user.is_superuser)
			},
		},
		methods:{
			getUrlAddress:function(){
				this.urlAddress =  window.location.href
			},
			getArticle:function(){
				let params = {
					id:this.$route.params.id
				}
				fetchArtDetail(params).then(res => {
                this.artDetail = res.data || {}
				this.$store.dispatch('setArticleDetail',this.artDetail)
				if(!this.artDetail.id){
				this.artDetail.title="啥也没有"
				this.artDetail.body="此文章不存在或无权限查看此文章!"
			    }
            }).catch(err => {
                console.log(err)
            })
			},

			//阅读计时，持久化存储时间
			setViewTime:function(){
				var timer = setInterval(() => {
					var idNum = this.$route.params.id;
					var secondsNum = 0;
			
					var viewTime = 	this.$store.getters.viewTime
					if (viewTime.hasOwnProperty(idNum)){
						var secondsNum = viewTime[idNum] + 1
					};
					let temp = {
						[idNum]:secondsNum
					};
					this.$store.commit('SET_VIEW_TIME',temp);
				 }, 1000);
				 // 通过$once来监听定时器，在beforeDestroy钩子可以被清除定时器。
				 this.$once('hook:beforeDestroy', () => {     
    				clearInterval(timer);                              
				});
			},
			
			//更新阅读量
			async updateViewsMethod() {
				var minutes = 10
				var idN = this.$route.params.id
				var viewsLocal = this.$store.getters.viewTime
				//判断localStorage中有无当前页面的累计时间，若无则退出
				if (viewsLocal[idN]){
					var seconds = viewsLocal[idN]
					// 判断累计时间超过minutes * 60,没超过就退出
					if (seconds >= minutes * 60){
						var views = parseInt(seconds / (minutes * 60))
						var remainingSeconds = parseInt(seconds % (minutes * 60))
					}
					else{
						return
					}
				}
				else{
					return
				}
				let params = {
					id:idN,
					views:views
				}
				// console.log(params)
				updateViews(params).then(res => {
					// console.log("res " + res.code + " " + typeof(res.code))
                	if (res.code == "success"){
						// console.log("remainingSeconds "+remainingSeconds)
						this.$store.commit('SET_VIEW_TIME',{[idN]:remainingSeconds});
					}
            	}).catch(err => {
                	console.log(err)
            	})
			},
			//初始化当前页
			initCurrentPage(){
				this.getArticle();
				this.getUrlAddress();
				this.updateViewsMethod();
				this.setViewTime();
			},
			
		},
		updated(){
			//数据获取，被渲染后，操作dom,执行添加行号
			//注:渲染后才能操作dom
			window.hljsln.initLineNumbersOnLoad();
		},
		mounted(){
		},
		created(){
			this.initCurrentPage();
			
		},

	}

</script>

<style scoped src="../styles/github-markdown.min.css">

</style>
<style lang="scss" scoped>
@import '@/styles/ArticleDetail.scss';
	.statement {
		border-radius: 5px;
		border-left: 3px solid #F56C6C;
		padding: 10px;
		margin-top: 1.2rem;
		background-color: #EBEEF5;
	}
</style>